<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue路由案例</title>
    <script src="../../js/vue3.js"></script>
    <script src="../../js/vue-router.global.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        a {
            color: white;
            text-decoration: none;
        }
        
        .head {
            width: 100%;
            height: 80px;
            line-height: 80px;
            background-color: #444;
            color: white;
        }
        
        .head h1 {
            font-size: 30px;
            margin-left: 8%;
        }
        
        .main {
            width: 100%;
            height: 620px;
        }
        
        .left {
            width: 20%;
            height: 620px;
            background-color: #666;
            float: left;
        }
        
        .left li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #969696;
            border-bottom: 1px solid #efefef;
            color: white;
            font-weight: bold;
        }
        
        .left li a {
            display: block;
        }
        
        .right {
            width: 80%;
            float: left;
        }
        
        .right .title {
            width: 100%;
            height: 80px;
            margin: 50px auto;
            text-align: center;
            color: black;
        }
        
        .foot {
            width: 100%;
            height: 60px;
            line-height: 60px;
            background-color: #444;
            text-align: center;
            color: white;
        }
        
        table {
            width: 60%;
            margin: 50px auto;
            font-size: 16px;
            border: 1px solid #999;
            border-collapse: collapse;
            font-weight: normal;
        }
        
        tr {
            height: 50px;
        }
        
        thead tr {
            background-color: #efefef;
        }
        
        td,
        th {
            border: 1px solid #999;
        }
        
        table span {
            color: darkblue;
        }
        
        table a {
            color: darkblue;
        }
        
        .btn {
            padding: 5px 10px;
            margin-top: 20px;
        }
        
        .router-link-active {
            background-color: brown;
        }
    </style>
</head>

<body>
    <!-- 运行 -->
    <div id="app">
        <!-- 头部区域 -->
        <header class="head">
            <h1>喜马拉雅后台管理系统</h1>
        </header>
        <!-- 主体区域 -->
        <div class="main">
            <!-- 左侧菜单栏 -->
            <div class="left">
                <ul>
                    <li>
                        <router-link to="/account">用户管理</router-link>
                    </li>
                    <li>
                        <router-link to="/administrator">权限管理</router-link>
                    </li>

                    <li>
                        <router-link to="/goods">商品管理</router-link>
                    </li>
                    <li>
                        <router-link to="/order">订单管理</router-link>
                    </li>
                    <li>
                        <router-link to="/system">系统设置</router-link>
                    </li>
                </ul>
            </div>
            <!-- 右侧内容区域 -->
            <div class="right">
                <div class="title">
                    <router-view name="body"></router-view>
                </div>
            </div>
        </div>
        <!-- 底部区域 -->
        <footer class="foot">版权信息</footer>
    </div>
    <!-- 模版 -->
    <template id="administrator">
        <h2>权限管理</h2>
    </template>
    <template id="goods">
        <h2>商品管理</h2>
    </template>
    <template id="order">
        <h2>订单管理</h2>
    </template>
    <template id="system">
        <h2>系统管理</h2>
    </template>
    <template id="account">
        <h2>用户管理</h2>
        <table border="1">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in items">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td> <a @click="delivers(item)">详情</a></td>
            </tr>
        </table>
     </template>
    <template id="deliver">
        <h2>用户id为{{this.$route.params.id}}</h2>
       
        <div class="title">
            <p @click="back">返回</p>
        </div>
    </template>
    <script>
        const v_app = Vue.createApp({
            data() {
                return {}
            }
        });
        const administrator = {
            template: "#administrator",
        }
        const goods = {
            template: "#goods",
        }
        const order = {
            template: "#order",
        }
        const system = {
            template: "#system",
        }
        const account = {
            template: "#account",
            data() {
                return {
                    items: [{
                        id: 1,
                        name: "cc",
                        age: "19",
                    }, {
                        id: 2,
                        name: "cc",
                        age: "19",
                    }, {
                        id: 3,
                        name: "cc",
                        age: "19",
                    }, {
                        id: 4,
                        name: "cc",
                        age: "19",
                    }, {
                        id: 5,
                        name: "cc",
                        age: "19",
                    }]
                }
            },
            methods: {
                delivers(item) {
                    this.$router.push({
                        name: "deliver",
                        params: {
                            id: item.id
                        }
                    });
                },
            }
        }
        const deliver = {
            template: "#deliver",
            methods: {
                back() {
                    this.$router.go(-1);
                }
            }
        }
        const routes = [{
            path: "/administrator",
            components: {
                'body': administrator,
            },
        }, {
            path: "/goods",
            components: {
                'body': goods,
            },
        }, {
            path: "/order",
            components: {
                'body': order,
            },
        }, {
            path: "/system",
            components: {
                'body': system,
            },
        }, {
            path: "/account",
            components: {
                'body': account,
            },
        }, {
            name: "deliver",
            path: "/deliver/:id",
            components: {
                'body': deliver,
            },
        }, ]
        const router = VueRouter.createRouter({
            history: VueRouter.createWebHashHistory(),
            routes: routes
        });
        v_app.use(router);
        v_app.mount("#app");
    </script>
</body>

</html>